import Vue from 'vue'
import VueRouter from 'vue-router'
import {getMenu} from "../api/menu.js";

Vue.use(VueRouter)

const routes = [
  //用户注册
  {
    path:"/UserRegister",
    name:"UserRegister",
    component:()=>import('../views/User/UserRegister.vue')
  },
  //登录
  {
    path: '/',
    name: 'UserLogin',
    component:()=>import('../views/User/UserLogin.vue')
  },
  //欢迎页面
  {
    path:"/WelcomeView",
    name:"WelcomeView",
    component:()=>import('../views/WelcomeView.vue')
  },
  {
    path:"/ErrorView",
    name:"ErrorView",
    component:()=>import('../views/ErrorView.vue')
  },

  //菜单导航页
  {
    path:"/MenuView",
    name:"MenuView",
    component:()=>import('../views/MenuView.vue'),
    //子路由
    children:[
      // 用户列表 *******************************************************************
      {
        path:"/UserList",
        name:"UserList",
        component:()=>import('../views/User/UserList.vue')
      },
      //用户修改
      {
        path:"/UpdateUser",
        name:"UpdateUser",
        component:()=>import('../views/User/UpdateUser.vue')
      },
      // 角色列表  ********************************************************************
      {
        path:"/RoleList",
        name:"RoleList",
        component:()=>import('../views/Role/RoleList.vue')
      },
      // 角色添加  
      {
        path:"/AddRole",
        name:"AddRole",
        component:()=>import('../views/Role/AddRole.vue')
      },
      // 角色修改 
      {
        path:"/UpdateRole",
        name:"UpdateRole",
        component:()=>import('../views/Role/UpdateRole.vue')
      },
      //权限分配  *********************************************************************   
      {     ///树形
        path:"/AssingPermission",
        name:"AssingPermission",
        component:()=>import('../views/Permission/AssingPermission.vue')
      },
      // 菜单列表   *********************************************************************
      {
        path:"/MenuList",
        name:"MenuList",
        component:()=>import('../views/Menu/MenuList.vue'),
        
      },
      // 菜单添加
      {
        path:"/MenuAdd",
        name:"MenuAdd",
        component:()=>import('../views/Menu/MenuAdd.vue')
      },
      // 菜单编辑
      {
        path:"/MenuEdit",
        name:"MenuEdit",
        component:()=>import('../views/Menu/MenuEdit.vue')
      },
      // 权限分配
      {
        path:"/AssingPermission",
        name:"AssingPermission",
        component:()=>import('../views/Permission/AssingPermission.vue')
      },

    ],
  },

]


// to：表示即将切换到的目标路由对象。可以通过 to.path 访问目标路由的路径，to.params 获取路由参数，to.query 获取查询参数等。
// from：表示当前的路由对象，即切换前的路由。可以通过 from.path 访问当前路由的路径，from.params 获取路由参数，from.query 获取查询参数等。
// next：是一个必须调用的函数，用于控制路由的行为。在路由守卫中，通过调用 next 函数来决定是否继续进行路由切换以及切换到哪个路由。
// 调用 next()：表示继续进行路由切换，进入下一个路由。
// 调用 next(false)：表示取消当前的路由切换，停留在原来的路由上。
// 调用 next('/path')：表示取消当前的路由切换，并重定向到指定的路径。
// 调用 next(error)：表示取消当前的路由切换，并传递一个错误给全局的 router.onError 处理函数。


// 创建一个新的路由实例
const router = new VueRouter({
  routes  //outes 是一个路由配置数组，用来定义应用程序的不同路由及其对应的组件。
});
// // 路由守卫
router.beforeEach(async (to, from, next) => {
  //定义需要排除路由守卫触发时的界面比如登录界面  不排除会出现以下错误Maximum call stack size exceeded
  const outerPaths = ["/"];
  // 判断用户是否已经登录
  const token = window.sessionStorage.getItem("token");
  //判断你的token和定义需要排除路由(!outerPaths.includes(to.path)) 记得要加非  ！！！！否则没有效果
  if (token == null && !outerPaths.includes(to.path)) {
    next("/");
  }
  else {
    if (to.name == undefined) {
      //解构！！！
      let { data } = await getMenu();
      data.forEach(m => {
        m.children.forEach((ele) => {
          //用户管理
          router.addRoute("menu", {
            path: '/' + ele.component,
            name: ele.component,
            component: resolve => require(['../views/' + ele.menuRoute], resolve),
          },)
        })
      });
      //404页面路由
      router.addRoute("", { path: '*', redirect: "/ErrorView" })

      next({ ...to, replace: true });
    } else {
      next();
    }
  }
});

export default router
